<template>
	<view class="pagesss">
		<view class="Lu-F-personheader">
			<!-- <view class="Lu-F-Userhead">
				<image class="Lu-F-Userimg" :src="userInfo.headImg" v-if="hasLogin"></image>
				<view class="Lu-F-Userimg" style="background-color: #4b53be;" v-else></view>
			</view> -->
			<!-- <view class="Lu-F-myheader">
				<view class="Lu-F-punch"><button open-type="share"><image src="/static/image/personal/qiandao.png"></image></button></view>
			</view> -->
		</view>
		<view class="Lu-F-Identityname">
			<view class="clearfix">
				<view class="fl">
					<view class="Lu-F-name" v-if="hasLogin">{{userInfo.nickname_encode}}</view>
					<button class="Lu-F-login" v-else withCredentials="true" open-type="getUserInfo"  lang="zh_CN" @getuserinfo="wxGetUserInfo">
						点击登录
					</button>
					<view>
						<view class="Lu-F-Identity" v-if="userInfo.identity_type == 1">普通用户</view>
						<view class="Lu-F-Identity" v-if="userInfo.identity_type == 2">事业合伙人</view>
						<view class="Lu-F-Identity" v-if="userInfo.identity_type == 3">商家</view>
						<view class="Lu-F-Identity" v-if="userInfo.identity_type == 4">代理</view>
						<view class="Lu-F-Identity1" v-if="!hasLogin">未认证</view>
					</view>
				</view>
				
				
				<view class="fl">
					<image class="Lu-F-Userimg" :src="userInfo.headImg" v-if="hasLogin"></image>
					<!-- <image class="Lu-F-Userimg" src="userInfo.headImg" v-if="hasLogin"></image> -->
				</view>
			</view>
			
			
			<view class="Lu-F-balance">
				<view class="Lu-F-Alreadypunched">
					<view>已打卡</view>
					<view class="Lu-F-number" v-if="userInfo.sign_days == 0"><text>0</text>天</view>
					<view class="Lu-F-number" v-else><text>{{userInfo.sign_days || '-'}}</text>天</view>
				</view>
				<view class="Lu-F-Verticalline"></view>
				<view class="Lu-F-Cashwithdrawal">
					<view>累计提现</view>
					<view class="Lu-F-number"><text>{{userInfo.apply_money || '-'}}</text>元</view>
				</view>
				<view class="Lu-F-Verticalline"></view>
				<view class="Lu-F-Lu-F-balance22" @click="navTo('/pages/personal/balance')">
					<view>余额</view>
					<view class="Lu-F-number"><text>{{userInfo.blance || '-'}}</text>元</view>
				</view>
			</view>
		</view>
		<view class="Lu-F-body">
			<view class="Lu-F-Order clearfix" @click="navTo('/pages/personal/news')">
				<view class="fl"><image src="/static/image/personal/xiaoxi.png"></image></view>
				<view class="fl Lu-F-bodyleft">我的消息</view>
				<view class="iconfont icon-gengduo fr"></view>
			</view>
			<view class="Lu-F-Order clearfix" @click="navTo('/pages/personal/order')">
				<view class="fl"><image src="/static/image/personal/kecheng.png"></image></view>
				<view class="fl Lu-F-bodyleft">我的订单</view>
				<view class="iconfont icon-gengduo fr"></view>
			</view>
			<view class="Lu-F-Settled clearfix" @click="navTo('/pages/personal/business')">
				<view class="fl"><image src="/static/image/personal/ruzhu.png"></image></view>
				<view class="fl Lu-F-bodyleft" v-if="userInfo.identity_type == 3">店铺管理</view>
				<view class="fl Lu-F-bodyleft" v-else>商家入驻</view>
				
				<view class="iconfont icon-gengduo fr"></view>
			</view>
			<view class="Lu-F-Team clearfix" @click="navTo('/pages/personal/team')">
				<view class="fl"><image src="/static/image/personal/tuandui.png"></image></view>
				<view class="fl Lu-F-bodyleft">我的团队</view>
				<view class="iconfont icon-gengduo fr"></view>
			</view>
			<view class="Lu-F-region clearfix" @click="navTo('/pages/personal/agent')">
				<view class="fl"><image src="/static/image/personal/shengdaiguanli.png"></image></view>
				<view class="fl Lu-F-bodyleft">地区代理</view>
				<view class="iconfont icon-gengduo fr"></view>
			</view>
			<view class="Lu-F-region clearfix" @click="navTo('/pages/personal/bdphone')" style="border: none;">
				<view class="fl"><text class="iconfont icon-bdphone" style="font-size: 44rpx;"></text></view>
				<view class="fl Lu-F-bodyleft">绑定手机</view>
				<view class="iconfont icon-gengduo fr"></view>
			</view>
		</view>
		<view class="Lu-F-footer">
			<view class="Lu-F-public clearfix">
				<view class="fl"><image src="/static/image/personal/gongyi_1.png"></image></view>
				<view class="fl Lu-F-bodyleft">去公益</view>
				<view class="iconfont icon-gengduo fr"></view>
			</view>
			<view class="Lu-F-join clearfix" @click="navTo('/pages/personal/join')" style="border: none;">
				<view class="fl"><image src="/static/image/personal/jiaru.png"></image></view>
				<view class="fl Lu-F-bodyleft" v-if="userInfo.identity_type == 1">去加入</view>
				<view class="fl Lu-F-bodyleft" v-else>去邀请</view>
				<view class="iconfont icon-gengduo fr"></view>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		mapState
	} from 'vuex';
	export default {
		computed: {
			...mapState(['hasLogin','userInfo','openId','apiUrl','pid'])
		},
		data() {
			return {
				userid:'',
				// hasLogin:false
			}
		},
		onLoad:function(options) {
			this.$store.commit('setpid', options.pid);
			console.log(options)
		},
		onShow:function(){
			if(this.openId != null){
				uni.request({
					url:this.apiUrl+'api/userInfo',
					method:"POST",
					header:{
						openid:this.openId
					},
					success: (res) => {
						console.log(res.data.data)
						this.$store.commit('login', res.data.data);
					}
				})
			}
			// uni.getStorage({
			//     key: 'hasLogin',
			//     success: function (res) {
					
			//         this.hasLogins = res.data
			//     }
			// });
		},
		onShareAppMessage: function (res) {
			if (!this.hasLogin) {
				// this.wxGetUserInfo()
				uni.showModal({
				    title: '未登录',
				    content: '请授权登录',
				    success: function (res) {
				        if (res.confirm) {
				           
				        } else if (res.cancel) {
				            
				        }
				    }
				})
			}
			
			  // 来自页面内转发按钮
			  else{
				  if (res.from === 'button') {
				  uni.request({
					url:this.apiUrl +'api/sign',
					data:{},
					method:'POST',
					header:{
						openid:this.userid
					},
					success: (res) => {
						const _this = this
						if(res.data.status == 200){
							uni.showModal({
								title: res.data.msg,
								success: function (res) {
									if (res.confirm) {
									   
									} else if (res.cancel) {
										
									}
								}
							})
							uni.request({
								url:_this.apiUrl+'api/userInfo',
								method:"POST",
								header:{
									openid:this.userid
								},
								success: (res) => {
									console.log(res.data.data)
									_this.$store.commit('login', res.data.data);
								}
							})
						}else{
							uni.showModal({
								title: res.data.msg,
								success: function (res) {
									if (res.confirm) {
									   
									} else if (res.cancel) {
										
									}
								}
							})
						}
						
					}
				  })
				}
			}
			return {
			  title: '自定义转发标题',
			  path: '/pages/personal/me'
			}
		},
		methods: {
			navTo(url) {
				if (!this.hasLogin) {
					// this.wxGetUserInfo()
					uni.showModal({
					    title: '未登录',
					    content: '请授权登录',
					    success: function (res) {
					        if (res.confirm) {
					           
					        } else if (res.cancel) {
					            
					        }
					    }
					})
				}else{
					uni.navigateTo({
						url
					})
				}
				
			},
			
			
			//#ifdef MP-WEIXIN
			wxGetUserInfo: function(e) {
				console.log(this.pid)
				// console.log(e)
				if (!e.detail.iv) {
					uni.showToast({
						title: "您取消了授权,登录失败",
						icon: "none"
					});
					return false;
				}
				
				uni.login({
					success: (res) => {
						console.log(res)
						uni.showToast({
							'title': '登陆中',
							'icon': 'loading'
						})
						const _this = this
						uni.request({
							
							url:_this.apiUrl+'api/getOpenid',
							data:{
								code:res.code,
							},
							method: 'POST',
							success: (res) => {
								console.log(res.data.data.openid)
								console.log(res.data)
								this.userid = res.data.data.unionid
								const open_id = res.data.data.openid
								const opneids = res.data.data.unionid
								const unionid = res.data.data.unionid
								uni.getUserInfo({
									 success: function(res){
										 console.log(res.userInfo)
										 uni.request({
										 	url:_this.apiUrl+'api/addUser',
											method:'POST',
											data:{
												openid:open_id,
												nickname:res.userInfo.nickName,
												headImg:res.userInfo.avatarUrl,
												unionid:unionid,
												pid:_this.pid,
												type:1
											},
											success: (res) => {
												console.log(res)
												uni.request({
													url:_this.apiUrl+'api/userInfo',
													method:"POST",
													header:{
														openid:opneids
													},
													success: (res) => {
														console.log(res.data.data)
														// this.$store.commit('setToken', '1111');
														_this.$store.commit('login', res.data.data);
														// this.hasLogin = this.$store.state.hasLogin
													}
												})
											}
										 })
									 }
								})
								
								
								this.$store.commit('setOpenid', res.data.data.unionid);
								console.log(this.$store.state.openId)
								
								
								
								uni.request({
									url:this.apiUrl+'api/my_course_list',
									data:{
										
									},
									method:'POST',
									header:{
										openid:res.data.unionid
									},
									success: (res) => {
										if(res.data.data.length == 0){
											
										}else{
											this.$store.commit('setorder', true);
										}
										
										console.log(res.data.data)
									},
									
								})
							}
						})
					}
				});
			},
			
			// #endif
			
			
			
		},
		beforeCreate() {
			
		},
		created() {
			
		}
	}
</script>

<style lang="scss">
	button::after{
		border:none;
	}
	page{
		background-color: #f5f5f5;
	}
	.pagesss{

	}
	.fl{
		float: left;
	}
	.fr{
		float: right;
	}
	.clearfix:after {
	    content: "."; 
	    display: block; 
	    height: 0; 
	    clear: both; 
	    visibility: hidden;  
	}
	.Lu-F-personheader{
		position: relative;
		height: 400rpx;
		overflow: hidden;
		background-color: #4b53be;
		-webkit-overflow-scrolling: touch; 
		.Lu-F-bgblue{
			background-color: #363c92;
			position: absolute;
			top: -380rpx;
			left: -200rpx;
			width: 600rpx;
			height: 600rpx;
			border-radius: 100%;
		}
		
		.Lu-F-myheader{
			margin: 70rpx 30rpx 0;
			display: flex;
			align-items: center;
			justify-content: stretch;
			.Lu-F-punch{
				width: 44rpx;
				height: 40rpx;
				z-index: 5;
				button{
					width: 44rpx;
					height: 40rpx;
					position: relative;
					background-color: #4b53be;
					image{
						width: 44rpx;
						height: 40rpx;
						position: absolute;
						top: 0;
						left: 0;
					}
				}
				
			}
			.Lu-F-news{
				width: 60rpx;
				height: 60rpx;
				z-index: 5;
				background-color: #030303;
				border-radius: 100%;
				display: flex;
				align-items: center;
				justify-content: center;
				opacity: .2;
				image{
					width: 44rpx;
					height: 40rpx;
				}
			}
			.Lu-F-my{
				font-size: 40rpx;
				font-weight: 200;
				color: #fff;
				z-index: 5;
				margin-left: 264rpx;
			}
		}
	}
	.Lu-F-Identityname{
		margin-top: -200rpx;
		padding: 0 20rpx;
		position: relative;
		z-index: 100;
		.Lu-F-Userimg{
			width: 120rpx;
			height: 120rpx;
			border-radius: 50%;
			margin-left: 20rpx;
			image{
				width: 120rpx;
				height: 120rpx;
				border-radius: 50%;
			}
		}
		.Lu-F-name{
			font-size: 48rpx;
			font-weight: 600;
			font-family: "宋体";
			color: #fff;
		}
		.Lu-F-login{
			background-color: #4b53be;
			width: 192rpx;
			height: 50rpx;
			margin: 0;
			padding: 0;
			line-height:50rpx;
			overflow: visible;
			// height: 46rpx;
			font-size: 48rpx;
			color: #f5f5f5;
		}
		.Lu-F-Identity{
			margin-top: 14rpx;
			display:inline-block;
			width: auto;
			padding: 0 20rpx;
			height: 40rpx;
			text-align: center;
			line-height: 40rpx;
			border-radius: 16rpx;
			background-color: #49a6fc;
			font-size: 24rpx;
			color: #fff;
		}
		.Lu-F-Identity1{
			margin-top: 10rpx;
			display:inline-block;
			width: auto;
			// padding: 0 20rpx;
			height: 40rpx;
			text-align: center;
			line-height: 40rpx;
			border-radius: 16rpx;
			// background-color: #919191;
			font-size: 24rpx;
			color: #fff;
		}
		.Lu-F-balance{
			width: 650rpx;
			padding: 0 30rpx;
			height: 140rpx;
			background-color: #ffffff;
			border-radius: 16rpx;
			display: flex;
			align-items: center;
			justify-content: space-around;
			margin-top: 28rpx;
			.Lu-F-Alreadypunched,.Lu-F-Cashwithdrawal,.Lu-F-Lu-F-balance22{
				font-size: 24rpx;
				color: #333333;
				text-align: center;
				.Lu-F-number{
					font-size: 24rpx;
					color: #999999;
					text{
						font-size: 48rpx;
						color: #0084ff;
					}
				}
			}
			.Lu-F-Verticalline{
				background-color: #cccccc;
				width: 2rpx;
				height: 54rpx;
			}
		}
	}
	.Lu-F-body,.Lu-F-footer{
		margin: 20rpx;
		border-radius: 16rpx;
		background-color: #fff;
		.Lu-F-Order,.Lu-F-Settled,.Lu-F-Team,.Lu-F-region,.Lu-F-join,.Lu-F-public{
			height: 100rpx;
			line-height: 100rpx;
			border: 1px solid #f2f2f2;
			padding: 0 50rpx;
			.Lu-F-bodyleft{
				margin-left: 40rpx;
				font-size: 30rpx;
			}
			view{
				display: flex;
				justify-content: center; 
				align-items: center;
				height: 100rpx;
			}
			view image{
				width: 40rpx;
				height: 40rpx;
			}
		}
	}
</style>
